<template>
  <div>
    <div class="flex flex-rc">
      <div class="title title--bg">{{ $t('市场规划') }}</div>
    </div>

    <div class="container mb-15">
      <ul class="table table--border fz-12">
        <li class="table__th">
          <div class="table__td">{{ $t('等级') }}</div>
          <div class="table__td">{{ $t('直推业绩') }}</div>
          <div class="table__td">{{ $t('间推业绩') }}</div>
          <div class="table__td">{{ $t('考核周期') }}</div>
          <div class="table__td">{{ $t('获得比例') }}</div>
        </li>
        <li class="table__tr" v-for="(v, i) in rules" :key="i">
          <div class="table__td">{{ v.agentLevel }}</div>
          <div class="table__td">{{ v.directPerformance }}</div>
          <div class="table__td">{{ v.indirectPerformance }}</div>
          <div class="table__td">{{ v.assessmentCycle }}</div>
          <div class="table__td">{{ v.bonusRate }}</div>
        </li>
      </ul>
    </div>

    <div class="container mb-15">
      <div class="fz-17 mb-10">{{ $t('注意事项') }}：</div>
      <div class="fz-12">
        {{ $t('考核标准') }}<br />
        {{ $t('考核标准1') }}<br />
        {{ $t('考核标准2') }}<br />
        {{ $t('考核标准3') }}<br />
        {{ $t('考核标准4') }}<br /><br />
        {{ $t('降级') }}<br />
        {{ $t('降级1') }}
      </div>
    </div>
  </div>

  <div>
    <div class="flex flex-rc">
      <div class="title title--bg">{{ $t('市场业绩') }}</div>
    </div>

    <div class="container fz-12 mb-15">
      <div>
        <span>{{ $t('代理等级') }}：</span>
        <span class="cl-primary">{{ stat.agentLevel }}</span>
      </div>
      <div class="flex">
        <div style="width: 50%">
          <span>{{ $t('直推业绩') }}：</span>
          <span class="cl-primary">{{ stat.directPerformance }}</span>
        </div>
        <div style="width: 50%">
          <span>{{ $t('间推业绩') }}：</span>
          <span class="cl-primary">{{ stat.indirectPerformance }}</span>
        </div>
      </div>
      <div class="flex">
        <div style="width: 50%">
          <span>{{ $t('下单次数') }}：</span>
          <span class="cl-primary">{{ stat.totalOrderCount }}</span>
        </div>
        <div style="width: 50%">
          <span>{{ $t('下单金额') }}：</span>
          <span class="cl-primary">{{ stat.totalOrderAmount }} PC</span>
        </div>
      </div>
      <div class="flex">
        <div style="width: 50%">
          <span>{{ $t('中奖金额') }}：</span>
          <span class="cl-primary">{{ stat.totalWinAmount }} PC</span>
        </div>
        <div style="width: 50%">
          <span>{{ $t('分红金额') }}：</span>
          <span class="cl-primary">{{ stat.totalBonusAmount }} PC</span>
        </div>
      </div>
      <div>
        <span>{{ $t('未提分红金额') }}：</span>
        <span class="cl-primary">{{ stat.unclaimedBonusAmount }} PC</span>
      </div>
      <div>
        <span>{{ $t('已提分红金额') }}：</span>
        <span class="cl-primary">{{ stat.claimedBonusAmount }} PC</span>
      </div>
      <div class="flex flex-center mt-10" style="width: 100%">
        <div class="btn click" style="width: 80%" @click="withdrawMarketStat">
          {{ $t('提现') }}
        </div>
      </div>
    </div>
  </div>

  <div class="mb-15">
    <div class="flex flex-rc">
      <div class="title title--bg">{{ $t('每日业绩') }}</div>
    </div>

    <div v-if="records3.length">
      <!-- 列表 -->
      <ul>
        <li class="container fz-12 mb-15" v-for="(v, i) in records3" :key="i">
          <div>
            <span>{{ $t('代理等级') }}：</span>
            <span class="cl-primary">{{ v.agentLevel }}</span>
          </div>
          <div class="flex">
            <div style="width: 50%">
              <span>{{ $t('直推业绩') }}：</span>
              <span class="cl-primary">{{ v.directPerformance }}</span>
            </div>
            <div style="width: 50%">
              <span>{{ $t('间推业绩') }}：</span>
              <span class="cl-primary">{{ v.indirectPerformance }}</span>
            </div>
          </div>
          <div class="flex">
            <div style="width: 50%">
              <span>{{ $t('下单次数') }}：</span>
              <span class="cl-primary">{{ v.totalOrderCount }}</span>
            </div>
            <div style="width: 50%">
              <span>{{ $t('下单金额') }}：</span>
              <span class="cl-primary">{{ v.totalOrderAmount }} PC</span>
            </div>
          </div>
          <div class="flex">
            <div style="width: 50%">
              <span>{{ $t('中奖金额') }}：</span>
              <span class="cl-primary">{{ v.totalWinAmount }} PC</span>
            </div>
            <div style="width: 50%">
              <span>{{ $t('分红金额') }}：</span>
              <span class="cl-primary">{{ v.totalBonusAmount }} PC</span>
            </div>
          </div>
          <div>
            <span>{{ $t('日期') }}：</span>
            <span class="cl-primary">{{ v.date }}</span>
          </div>
        </li>
      </ul>

      <!-- 分页 -->
      <van-pagination
        mode="simple"
        :prev-text="$t('上一页')"
        :next-text="$t('下一页')"
        :total-items="total3"
        :items-per-page="size3"
        @change="getMarketStatDay"
        v-model="page3"
      ></van-pagination>
    </div>

    <!-- 空数据 -->
    <van-empty v-else>
      <div class="cl-white">{{ $t('暂无数据') }}</div>
    </van-empty>
  </div>

  <div>
    <div class="flex flex-rc">
      <div class="title title--bg">{{ $t('提现记录') }}</div>
    </div>

    <div v-if="records1.length">
      <!-- 列表 -->
      <ul>
        <li class="container fz-12 mb-15" v-for="(v, i) in records1" :key="i">
          <div>
            <span>{{ $t('提现金额') }}：</span>
            <span class="cl-primary">{{ v.directPerformance }} PC</span>
          </div>
          <div>
            <span>{{ $t('提现状态') }}：</span>
            <span class="cl-primary">{{ v.status }}</span>
          </div>
          <div>
            <span>{{ $t('提现哈希') }}：</span>
            <span class="cl-primary">{{ v.txhash }}</span>
          </div>
          <div>
            <span>{{ $t('提现时间') }}：</span>
            <span class="cl-primary">{{ v.createTime }}</span>
          </div>
        </li>
      </ul>

      <!-- 分页 -->
      <van-pagination
        mode="simple"
        :prev-text="$t('上一页')"
        :next-text="$t('下一页')"
        :total-items="total1"
        :items-per-page="size1"
        @change="getMarketWithdraw"
        v-model="page1"
      ></van-pagination>
    </div>

    <!-- 空数据 -->
    <van-empty v-else>
      <div class="cl-white">{{ $t('暂无数据') }}</div>
    </van-empty>
  </div>

  <div>
    <div class="flex flex-rc">
      <div class="title title--bg">{{ $t('市场下级') }}</div>
    </div>

    <div v-if="records2.length">
      <!-- 列表 -->
      <ul>
        <li class="container fz-12 mb-15" v-for="(v, i) in records2" :key="i">
          <div>
            <span>{{ $t('钱包地址') }}：</span>
            <span class="cl-primary">
              {{
                v.walletAddress.replace(
                  v.walletAddress.slice(10, 32),
                  '*******'
                )
              }}
            </span>
          </div>
          <div>
            <span>{{ $t('代理等级') }}：</span>
            <span class="cl-primary">{{ v.agentLevel }}</span>
          </div>
          <div class="flex">
            <div style="width: 50%">
              <span>{{ $t('直推业绩') }}：</span>
              <span class="cl-primary">{{ v.directPerformance }}</span>
            </div>
            <div style="width: 50%">
              <span>{{ $t('间推业绩') }}：</span>
              <span class="cl-primary">{{ v.indirectPerformance }}</span>
            </div>
          </div>
          <div class="flex">
            <div style="width: 50%">
              <span>{{ $t('下单次数') }}：</span>
              <span class="cl-primary">{{ v.totalOrderCount }}</span>
            </div>
            <div style="width: 50%">
              <span>{{ $t('下单金额') }}：</span>
              <span class="cl-primary">{{ v.totalOrderAmount }} PC</span>
            </div>
          </div>
          <div class="flex">
            <div style="width: 50%">
              <span>{{ $t('中奖金额') }}：</span>
              <span class="cl-primary">{{ v.totalWinAmount }} PC</span>
            </div>
            <div style="width: 50%">
              <span>{{ $t('分红金额') }}：</span>
              <span class="cl-primary">{{ v.totalBonusAmount }} PC</span>
            </div>
          </div>
        </li>
      </ul>

      <!-- 分页 -->
      <van-pagination
        mode="simple"
        :prev-text="$t('上一页')"
        :next-text="$t('下一页')"
        :total-items="total2"
        :items-per-page="size2"
        @change="getMarketList"
        v-model="page2"
      ></van-pagination>
    </div>

    <!-- 空数据 -->
    <van-empty v-else>
      <div class="cl-white">{{ $t('暂无数据') }}</div>
    </van-empty>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from 'js/api'
import mitt from 'js/mitt'
import { showToast } from 'vant'

const rules = ref([])
const stat = ref({})

const page1 = ref(1)
const size1 = ref(5)
const total1 = ref(0)
const records1 = ref([])

const page2 = ref(1)
const size2 = ref(5)
const total2 = ref(0)
const records2 = ref([])

const page3 = ref(1)
const size3 = ref(5)
const total3 = ref(0)
const records3 = ref([])

getMarketRule()
getMarketStat()
getMarketStatDay()
getMarketList()
getMarketWithdraw()

mitt.on('refresh', () => {
  setTimeout(() => {
    page1.value = 1
    page2.value = 1
    page3.value = 1
    getMarketRule()
    getMarketStat()
    getMarketStatDay()
    getMarketList()
    getMarketWithdraw()
  }, 3000)
})

// 获取市场规划
async function getMarketRule() {
  const { code, data } = await api.getMarketRule()

  if (code === 200) {
    rules.value = data
  }
}

// 获取市场业绩
async function getMarketStat() {
  const { code, data } = await api.getMarketStat()

  if (code === 200) {
    stat.value = data
  }
}

// 获取每日业绩
async function getMarketStatDay() {
  const params = {
    current: page3.value,
    size: size3.value,
  }

  const { code, data } = await api.getMarketStatDay(params)

  if (code === 200) {
    total3.value = data.total
    records3.value = data.records
  }
}

// 获取市场下级
async function getMarketList() {
  const params = {
    current: page2.value,
    size: size2.value,
  }

  const { code, data } = await api.getMarketList(params)

  if (code === 200) {
    total2.value = data.total
    records2.value = data.records
  }
}

// 市场业绩提现
async function withdrawMarketStat() {
  const { code } = await api.withdrawMarketStat()

  if (code === 200) {
    showToast(t('操作成功'))

    setTimeout(() => {
      getMarketRule()
      getMarketStat()
      getMarketList()
    }, 2000)
  }
}

// 获取市场业绩提现记录
async function getMarketWithdraw() {
  const params = {
    current: page1.value,
    size: size1.value,
  }

  const { code, data } = await api.getMarketWithdraw(params)

  if (code === 200) {
    total1.value = data.total
    records1.value = data.records
  }
}
</script>

<style lang="scss" scoped></style>
